<template>
	<view class="content">
		<view class="con">
			<view class="top">
				<text></text>
				<view>开通旺旺会员</view>
				<text></text>
			</view>
			<view class="jine">
				<text>￥</text>
				{{price}}.00
			</view>
			<view class="bottom">
				<view class="h2">
					支付方式
				</view>
				<view class="zhifubao">
					<view class="le">
						<image src="../../static/img/alipay.png" mode="widthFix"></image>
						<text>支付宝</text>
					</view>
					<view class="right">

					</view>
				</view>
				<view class="weixin">
					<view class="le">
						<image src="../../static/img/weixin.jpeg" mode="widthFix"></image>
						<text>微信</text>
					</view>
					<view class="right">

					</view>
				</view>
			</view>
			<view class="button">
				<!-- #ifdef APP-PLUS -->
				<button size="mini" v-for="(item,index) in providerList" :key="item.id" :loading="item.loading"
					@click="requestPayment(item,index)">{{item.name}}支付</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button class="btn" style="
					background-color: #fc556c;
					font-size: 22 * @width;
					color: #fff;">立即支付</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: 49,
				providerList: [], //支付厂商，微信，或者支付
				openid: '', //用户id
				loading: false, //小程序微信支付
			}
		},
		onLoad() {
			var that = this;
			// 获取支付厂商
			uni.getProvider({
				service: "payment",
				success: (e) => {
					console.log(JSON.stringify(e))
					var provider = e.provider;
					// 映射一个格式（添加loading是否加载中）
					that.providerList = provider.map(item => {
						if (item === "alipay") {
							return {
								name: '支付宝',
								id: item,
								loading: false
							}
						} else if (item === "wxpay") {
							return {
								name: '微信',
								id: item,
								loading: false
							}
						}
					})
				}
			})
		},
		methods: {
			async weixinPay() {
				this.loading = true; //加载中
				// 获取openid
				let openid = uni.getStorageSync('openid')
				if (!openid) {
					// 执行登录获取openid
					openid = await this.loginMpWeixin();
					this.openid = openid;
				}
				// 获取订单信息
				let orderInfo = await this.getOrderInfo('wxpay')
				// 如果没有订单信息，弹出订单信息失败
				if (!orderInfo) {
					uni.showModal({
						content: '获取支付信息失败',
						showCancel: false
					})
					return
				}
				// 发起支付
				uni.requestPayment({
					...orderInfo,
					// 成功
					success: (res) => {
						uni.showToast({
							title: "感谢您的赞助!"
						})
					},
					// 失败
					fail: (res) => {
						uni.showModal({
							content: "支付失败,原因为: " + res
								.errMsg,
							showCancel: false
						})
					},
					// 移除loading
					complete: () => {
						this.loading = false;
					}
				})
			},
			loginMpWeixin() {
				// 返回一个promise
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success(res) {
							// login成功会得到一个code
							// 请求后端的登录
							uni.request({
								url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center',
								method: 'POST',
								data: {
									action: 'loginByWeixin',
									params: {
										code: res.code, // 传入code
										platform: 'mp-weixin'
									}
								},
								success(res) {
									if (res.data.code !== 0) {
										reject(new Error('获取openid失败：', res.result.msg))
										return
									}
									// 成功后存储opendi
									uni.setStorageSync('openid', res.data.openid)
									// 返回openid
									resolve(res.data.openid)
								},
								fail(err) {
									reject(new Error('获取openid失败：' + err))
								}
							})
						}
					})
				})
			},
			// 实现支付
			async requestPayment(item, index) {
				// 显示加载中
				item.loading = true;
				// 获取订单信息
				let orderInfo = await this.getOrderInfo(item.id);
				// 发起支付
				uni.requestPayment({
					provider: item.id, //提供商
					orderInfo: orderInfo, //订单信息
					// 成功提示
					success: (e) => {
						console.log("success", e);
						uni.showToast({
							title: "感谢您的赞助!"
						})
					},
					// 失败
					fail: (e) => {
						console.log("fail", e);
					},
					// 停止加载中
					complete: () => {
						item.loading = false;
					}
				})

			},
			// 获取订单信息
			getOrderInfo(provider) {
				// 返回一个promise
				return new Promise((resolve, reject) => {
					// 请求订单信息
					uni.request({
						method: 'POST',
						url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay',
						data: {
							provider, //支付厂商
							openid: this.openid, //openid(微信支付用)
							totalFee: Number(this.price) * 100, // 转为以为单位 
							platform: 'app-plus', //平台
						},
						success(res) {
							if (res.data.code === 0) {
								// 返回订单信息
								resolve(res.data.orderInfo)
							} else {
								// 失败
								reject(new Error('获取支付信息失败' + res.data.msg))
							}
						},
						fail(err) {
							// 请求失败
							reject(new Error('请求支付接口失败' + err))
						}
					})
				})
			},
			priceChange(e) {
				this.price = e.detail.value;
			}
		}
	}
</script>

<style lang="less">
	@width: (100vw / 375);

	.content {
		width: 100vw;
		height: 100vh;
		background-image: url("../../static/img/pinkbg.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		overflow: hidden;

		.con {
			width: 365 * @width;
			height: 500 * @width;
			margin: 30 * @width auto;
			background-image: url("../../static/img/writebg.png");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			box-sizing: border-box;
			padding: 20 * @width 40 * @width;

			.top {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14 * @width;
				color: #454545;

				text {
					width: 40 * @width;
					height: 2 * @width;
					background-color: #ededed;
				}

				view {
					margin: 0 8 * @width;
				}
			}

			.jine {
				margin-top: 60 * @width;
				display: flex;
				justify-content: center;
				align-items: baseline;
				font-size: 36 * @width;
				font-weight: 700;
				color: #fc556c;

				text {
					font-size: 14 * @width;
					margin-right: 6 * @width;
				}
			}

			.bottom {
				margin-top: 30 * @width;

				.h2 {
					line-height: 3;
					border-bottom: 1 * @width solid #ccc;
				}


				.zhifubao {
					height: 80 * @width;
					display: flex;
					align-items: center;
				}

				.weixin,
				.zhifubao {
					margin: 0 10 * @width;

					.le {
						display: flex;
						align-items: center;

						image {
							width: 30 * @width;
							border-radius: 4 * @width;
						}

						text {
							margin-left: 10 * @width;

						}
					}
				}

			}


			.button {
				margin-top: 100 * @width;
				display: flex;
				justify-content: center;

				button {
					width: 120 * @width;
					height: 35 * @width;
					line-height: 30 * @width;
					border-radius: 0;
					font-size: 16 * @width;
					color: #fff;
				}

				button:nth-of-type(1) {
					font-size: 14 * @width;
					background-color: #4084f5;
				}

				button:nth-of-type(2) {
					background-color: #01bc0d;
				}


			}

			/* #ifdef H5 */
			.button {
				margin-top: 80 * @width;

				.btn {
					width: 250 * @width;
					height: 50 * @width;
					line-height: 50 * @width;
					border-radius: 25* @width;
					text-align: center;
				}
			}

			/* #endif */
		}
	}
</style>
